<template>
    <div class="navbar">
        <hamburger
                id="hamburger-container"
                :is-active="sidebar.opened"
                class="hamburger-container"
                @toggleClick="toggleSideBar"
        />
        <breadcrumb
                id="breadcrumb-container"
                class="breadcrumb-container"
        />
        <div class="right-menu">
            <template v-if="device!=='mobile'">
                <header-search class="right-menu-item"/>
                <screenfull class="right-menu-item hover-effect"/>
                <el-tooltip
                        :content="$t('navbar.size')"
                        effect="dark"
                        placement="bottom"
                >
                    <size-select class="right-menu-item hover-effect"/>
                </el-tooltip>
                <lang-select class="right-menu-item hover-effect"/>
            </template>
            <el-dropdown
                    class="avatar-container right-menu-item hover-effect"
                    trigger="click"
            >
                <div class="avatar-wrapper">
                    <img src="@/assets/image/zhan.jpg"
                         class="user-avatar"
                    >
                    <i class="el-icon-caret-bottom"/>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <router-link to="/profile/">
                        <el-dropdown-item>
                            {{ $t('navbar.profile') }}
                        </el-dropdown-item>
                    </router-link>
                    <router-link to="/">
                        <el-dropdown-item>
                            {{ $t('navbar.dashboard') }}
                        </el-dropdown-item>
                    </router-link>
                    <a
                            target="_blank"
                            href="https://github.com/armour/vue-typescript-admin-template/"
                    >
                        <el-dropdown-item>
                            {{ $t('navbar.github') }}
                        </el-dropdown-item>
                    </a>
                    <a
                            target="_blank"
                            href="https://armour.github.io/vue-typescript-admin-docs/"
                    >
                        <el-dropdown-item>Docs</el-dropdown-item>
                    </a>
                    <el-dropdown-item
                            divided
                            @click.native="logout"
                    >
            <span style="display:block;">
              {{ $t('navbar.logOut') }}
            </span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator'
    import {AppModule} from '@/core/store/modules/app'
    import {UserModule} from '@/core/store/modules/user'
    import Breadcrumb from '@/core/layouts/components/Breadcrumb.vue'
    import Hamburger from '@/core/layouts/components/Hamburger.vue'
    import HeaderSearch from '@/core/layouts/components/HeaderSearch.vue'
    import LangSelect from '@/core/layouts/components/LangSelect.vue'
    import Screenfull from '@/core/layouts/components/Screenfull.vue'
    import SizeSelect from '@/core/layouts/components/SizeSelect.vue'

    @Component({
        name: 'Navbar',
        components: {
            Breadcrumb,
            Hamburger,
            HeaderSearch,
            LangSelect,
            Screenfull,
            SizeSelect
        }
    })
    export default class Navbar extends Vue {
        get sidebar() {
            return AppModule.sidebar
        }

        get device() {
            return AppModule.device.toString()
        }

        get avatar() {
            return UserModule.avatar
        }

        private toggleSideBar() {
            AppModule.ToggleSideBar(false)
        }

        private async logout() {
            await UserModule.LogOut()
            this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        }
    }
</script>

<style lang="scss" scoped>
    .navbar {
        height: 50px;
        overflow: hidden;
        position: relative;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0, 21, 41, .08);

        .hamburger-container {
            line-height: 46px;
            height: 100%;
            float: left;
            padding: 0 15px;
            cursor: pointer;
            transition: background .3s;
            -webkit-tap-highlight-color: transparent;

            &:hover {
                background: rgba(0, 0, 0, .025)
            }
        }

        .breadcrumb-container {
            float: left;
        }

        .errLog-container {
            display: inline-block;
            vertical-align: top;
        }

        .right-menu {
            float: right;
            height: 100%;
            line-height: 50px;

            &:focus {
                outline: none;
            }

            .right-menu-item {
                display: inline-block;
                padding: 0 8px;
                height: 100%;
                font-size: 18px;
                color: #5a5e66;
                vertical-align: text-bottom;

                &.hover-effect {
                    cursor: pointer;
                    transition: background .3s;

                    &:hover {
                        background: rgba(0, 0, 0, .025)
                    }
                }
            }

            .avatar-container {
                margin-right: 30px;

                .avatar-wrapper {
                    margin-top: 5px;
                    position: relative;

                    .user-avatar {
                        cursor: pointer;
                        width: 40px;
                        height: 40px;
                        border-radius: 10px;
                    }

                    .el-icon-caret-bottom {
                        cursor: pointer;
                        position: absolute;
                        right: -20px;
                        top: 25px;
                        font-size: 12px;
                    }
                }
            }
        }
    }
</style>
